import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const navigate = useNavigate();

  const onFinish = ({ username, password }) => {
    setLoading(true);
    setTimeout(() => {
      if (username === 'admin' && password === '123456') {
        message.success('登录成功！');
        navigate('/admin/mainboard');
      } else {
        message.error('用户名或密码错误！');
      }
      setLoading(false);
    }, 800);
  };

  return (
    <div
      style={{
        height: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#f0f2f5',
      }}
    >
      <div
        style={{
          width: 300,
          background: '#fff',
          padding: '24px 32px',
          borderRadius: 8,
          boxShadow: '0 2px 8px rgba(0,0,0,.1)',
        }}
      >
        <h2 style={{ textAlign: 'center', marginBottom: 24 }}>用户登录</h2>

        <Form onFinish={onFinish} autoComplete="off">
          {/* 用户名 */}
          <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="用户名" style={{ textAlign: 'center', paddingRight: 32 }} />
          </Form.Item>

          {/* 密码：图标绝对定位，不占用 suffix */}
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <div style={{ position: 'relative' }}>
              <Input
                type={visible ? 'text' : 'password'}
                placeholder="密码"
                style={{ textAlign: 'center', paddingRight: 32 }} // 给图标留空
              />
              <span
                style={{
                  position: 'absolute',
                  right: 8,
                  top: '50%',
                  transform: 'translateY(-50%)',
                  cursor: 'pointer',
                  color: '#999',
                }}
                onClick={() => setVisible((v) => !v)}
              >
                {visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />}
              </span>
            </div>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;